<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>登录界面</title>
	<link rel="stylesheet" type="text/css" href="/static/webAPP/css/loginstyles.css">
	<!--[if IE]>
		<script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="jq22-container" style="padding-top:100px">
		<div class="login-wrap">
			<div class="login-html">
				<input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">登录</label>
				<input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">注册</label>
				<div class="login-form">
					<div class="sign-in-htm">
						<div class="group">
							<label for="user" class="label">账号</label>
							<input id="signIn_user" type="text" class="input">
						</div>
						<div class="group">
							<label for="pass" class="label">密码</label>
							<input id="signIn_password" type="password" class="input" data-type="password">
						</div>
						<div class="group">
							<input id="check" type="checkbox" class="check" checked>
							<label for="check"><span class="icon"></span>保存密码</label>
						</div>
						<div class="group">
							<input type="submit" class="button signinIn_btn" value="登录">
						</div>
						<div class="hr"></div>
						<div class="foot-lnk">
							<a href="#forgot">忘记密码?</a>
						</div>
					</div>
					<div class="sign-up-htm">
						<div class="group">
							<label for="user" class="label">账号</label>
							<input id="signUp_user" type="text" class="input" placeholder="账号由6-18位字母或数字">
						</div>
						<div class="group">
							<label for="pass" class="label">密码</label>
							<input id="signUp_password" type="password" class="input" data-type="password" placeholder="密码由字母开头的6-18字母或数字">
						</div>
						<div class="group">
							<label for="pass" class="label">再次输入密码</label>
							<input id="signUp_password1" type="password" class="input" data-type="password" placeholder="两次密码必须相同">
						</div>
						<div class="group">
							<label for="pass" class="label">手机号</label>
							<input id="signUp_phone" type="text" class="input" placeholder="十一位手机号">
						</div>
						<div class="group">
							<input type="submit" class="button signUp_btn" value="注册">
						</div>
						<div class="hr"></div>
						<div class="foot-lnk">
							<label for="tab-1">已有账号?</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<script src="/static/webAPP/js/jquery-1.8.3.min.js"></script>
	<script src="/static/webAPP/lib/mobile/layer.js"></script>
	<script>
		$(".signinIn_btn").on("click",function(){
			var username = $("#signIn_user").val()
			var password = $("#signIn_password").val()
			if (isnull(username) || isnull(password)) {
				layer.open({
					content: '账号、密码不能为空',
					skin: 'msg',
					time: 2 //2秒后自动关闭
				});
			}else{
				if (sessionStorage.getItem("sessionName") == username) {
					window.location = "./personal-center.html";
					layer.open({
						content: '账号已登录',
						skin: 'msg',
						time: 2 //2秒后自动关闭
					});
				}else{
					$.ajax({
						type: "post",
                //TODO:
						url: "/signIn",
						data: {username: username,password: password},
						dataType: "json",
						success:function(data){
							if (data.code == 'success') {
								//页面跳转
								window.location = "./personal-center.html";
								sessionStorage.setItem("sessionName", username)
							}else if(data.code == 'fail'){
								layer.open({
									content: data.msg,
									skin: 'msg',
									time: 2 //2秒后自动关闭
								});
							}
						}
					})
				}
			}
		})

		$(".signUp_btn").on("click",function(){
			var userName = $("#signUp_user").val()
			var passWord = $("#signUp_password").val()
			var phone = $("#signUp_phone").val()
			//判断输入手机号
			var reg_phone = /1\d{10}/
			if (phone != '' && phone != undefined && phone != null) {
				if(!reg_phone.test(phone)){   //验证手机是否符合格式
					layer.open({
						content: '请输入正确的手机号',
						skin: 'msg',
						time: 2 //2秒后自动关闭
					});
					return
				}
			}
			
			var reg_password = /^[a-zA-Z][0-9a-zA-Z]{6,18}$/
			var reg_username = /^[A-Za-z0-9]{6,18}$/
			if (isnull(userName) || isnull(passWord)) {
				layer.open({
					content: "账号，密码均不能为空",
					skin: 'msg',
					time: 2 //2秒后自动关闭
				})
				return
			}else if (reg_password.test(passWord) && reg_username.test(userName)) {
				if (passWord != $("#signUp_password1").val()) {
					layer.open({
						content: '两次密码输入不一致',
						skin: 'msg',
						time: 2 //2秒后自动关闭
					});
					return
				}else{
					$.ajax({
						type: "post",
                //TODO:
						url: "/signUp",
						data: {username: userName,password: passWord,phone: phone},
						dataType: "json",
						success:function(data){
							if (data.code == 10000) {
								window.location = "./index.html";
								sessionStorage.setItem("sessionName", userName)
							}else{
								layer.open({
									content: data.message,
									skin: 'msg',
									time: 2 //2秒后自动关闭
								});
							}
						},
						error:function(){
							layer.open({
									content: '服务器错误，请稍后注册',
									skin: 'msg',
									time: 2 //2秒后自动关闭
								});
						}
					})
				}
			}else{
				layer.open({
					content: "账号，密码由6-18位字母或数字,不能含有空格和特殊字符",
					skin: 'msg',
					time: 2 //2秒后自动关闭
				})
				return
			}
		})

		
		function isnull(val) {
 
			var str = val.replace(/(^\s*)|(\s*$)/g, '');//去除空格;

			if (str =='' || str ==undefined || str ==null) {
				return true;
			} else {
				return false;
			}
		}
	</script>


</body>
</html>